
    <template>
<div>
 
  <span class="el-icon-back" v-if="level>1" @click="goBack"></span> 
 <!-- {{ parentId }} {{level}} 父类id  等级 -->

  <span v-if="level==1">一级分类</span>
  <span v-else-if="level==2">二级分类</span>
  <span v-else>三级分类</span>
  <el-button type="primary">增加</el-button>
  <el-button type="danger">批量删除</el-button>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
    prop="categoryName"
      label="分类名称">
      
    </el-table-column>
    <el-table-column
      prop="categoryRank"
      label="排序值">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="时间"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="操作">

        <template  slot-scope="scope">
            <el-button size="small" type="warning" @click="handleEditor(scope.$index, scope.row)">修改</el-button>
            <el-button size="small" :disabled="level==3" type="primary" @click="handleNext(scope.$index, scope.row)">下级分类</el-button>
            <el-button size="small" type="danger"  @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
    </el-table-column>

  </el-table>
  
  <!-- 下面是分页 -->

  <el-pagination
  background
  layout="prev, pager, next"
  :total="10">
</el-pagination>
</div>
</template>


<script>
  export default {
    data() {
      return {
        tableData: [],
        multipleSelection: [],
        level:1,
        parentId:0
      }
    },
    mounted(){
        this.getPage(1,1);//第一页 第一级
    },
    watch:{
        level(n,o){
            if(n==1){
                this.parentId=0;
            }
        }
    },

    methods: {
       async getPage(page,level,parentId=0){//分类页码，分类等级，父类id
          const result= await this.$http.get("/categories",{
             params:{
              pageNumber:page,
              pageSize:10,
              categoryLevel:level,
              parentId
             }
          })

          console.log(result);
          this.tableData=result.data.list
       },
       goBack(){ //返回上一个页面
        this.level--;
        // console.log(this.level);

           let getLevel=this.level==2?this.parentId:0
          this.getPage(1,this.level,getLevel)
       },

       handleEditor(index,row){//修改
    
       },
       handleNext(index,row){//下一级
            // console.log("下级"+(row.categoryLevel+1));
            // console.log("父类id"+row.categoryId);
            let  level=row.categoryLevel+1;
            this.level=level;
           
             if(level==2){
              this.parentId=row.categoryId;
             }
            this.getPage(1,level,row.categoryId)
       },
       handleDel(index,row){//删除

       },


      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

<style>

</style>